<template>
  <div class="equipmenti-information">
    <span class="equipment-info">
      <span class="electric-img">
        <span class="color-content">
          <img :src="
              (batteryElectric < 4 && equipmentType == 1) ||
              (batteryElectric <= 30 && equipmentType != 1)
                ? require('@static/images/batteryRed.png')
                : require('@static/images/batteryGreen.png')
            " />
          <span class="fill-content">
            <span v-if="equipmentType == 1"
                  class="blank-content"
                  :style="firstBatteryStyle"></span>
            <span v-if="equipmentType == 2 || equipmentType == 3"
                  class="blank-content"
                  :style="electricColor"></span>
          </span>
        </span>
        <span class="text-content"
              v-if="equipmentType == 1"
              :style="batteryElectric < 4 ? 'color: red' : 'color: green'">{{ batteryElectricValue }}</span>
        <span class="text-content"
              v-if="equipmentType == 2 || equipmentType == 3"
              :style="batteryElectric <= 30 ? 'color: red' : 'color: green'">{{ batteryElectricValue }}</span>
      </span>
      <span class="signal-img">
        <img :src="
            equipmentStatus == '在线'
              ? require('@static/images/stateGreen.png')
              : require('@static/images/stateRed.png')
          "
             alt="" />
        <span class="text-content"
              :style="equipmentStatus == '在线' ? 'color: green' : 'color: red'">{{ equipmentStatus }}</span>
      </span>
    </span>
  </div>
</template>

<script>
export default {
  name: "EquipmentInformation",
  props: {
    batteryElectric: {
      type: [String, Number],
      default: ""
    }, // 电量
    batteryElectricValue: [String, Number],
    equipmentType: [String, Number], // 第几代设备
    equipmentStatus: String
  },
  data () {
    return {
      batteryStyle: ""
    };
  },
  computed: {
    // 第一代 电子回单电量颜色
    firstBatteryStyle () {
      let color = "height: 21px;background: green;";
      if (this.batteryElectric == 0)
        color = "height: 0;background: red;";
      if (this.batteryElectric === 1)
        color = "height: 3px;background: red;";
      if (this.batteryElectric === 2)
        color = "height: 4px;background: red;";
      if (this.batteryElectric === 3)
        color = "height: 6px;background: red;";
      if (this.batteryElectric === 4)
        color = "height: 10px;background: green;";
      if (this.batteryElectric === 5)
        color = "height: 15px;background: green;";
      if (this.batteryElectric === 6)
        color = "height: 17px;background: green;";
      return color;
    },
    // 电子回单电量颜色
    electricColor () {
      console.log("========>electricColor", this.batteryElectric, this.batteryElectricValue, this.equipmentType)
      let color;
      if (this.batteryElectric == 0) color = "height: 0;background: red;";
      if (this.batteryElectric > 0 && this.batteryElectric <= 10)
        color = "height: 3px;background: red;";
      if (this.batteryElectric > 10 && this.batteryElectric <= 20)
        color = "height: 5px;background: red;";
      if (this.batteryElectric > 20 && this.batteryElectric <= 30)
        color = "height: 7px;background: red;";
      if (this.batteryElectric > 30 && this.batteryElectric <= 40)
        color = "height: 8px;background: green;";
      if (this.batteryElectric > 40 && this.batteryElectric <= 50)
        color = "height: 9px;background: green;";
      if (this.batteryElectric > 50 && this.batteryElectric <= 60)
        color = "height: 11px;background: green;";
      if (this.batteryElectric > 60 && this.batteryElectric <= 70)
        color = "height: 13px;background: green;";
      if (this.batteryElectric > 70 && this.batteryElectric <= 80)
        color = "height: 15px;background: green;";
      if (this.batteryElectric > 80 && this.batteryElectric <= 90)
        color = "height: 17px;background: green;";
      if (this.batteryElectric > 90 && this.batteryElectric < 100)
        color = "height: 18px;background: green;";
      if (this.batteryElectric == 100)
        color = "height: 21px;background: green;";
      return color;
    }
  }
};
</script>
<style lang="scss" scoped>
.equipmenti-information {
  .equipment-info {
    float: left;
    padding-left: 12px;
    .electric-img {
      float: left;
      padding-top: 4px;
      margin-right: 12px;
      position: relative;
      .color-content {
        float: left;
        width: 16px;
        height: 26px;
        margin-right: 4px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        .fill-content {
          position: absolute;
          bottom: 1px;
          left: 1px;
          width: 12px;
          .blank-content {
            position: absolute;
            left: 1px;
            bottom: 1px;
            width: 100%;
            height: 10px;
          }
        }
      }
      .text-content {
        float: left;
        padding-top: 2px;
      }
    }
    .signal-img {
      float: left;
      padding-top: 6px;
      img {
        width: 18px;
        height: 22px;
        float: left;
        margin-right: 4px;
      }
      .text-content {
        float: left;
      }
    }
  }
}
</style>
